<script type="text/javascript">
  $(function(){  
    $('#tabs').tabs();
  });
</script>
<h2 class="demoHeaders">Administraci&oacute;n</h2>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Docentes</a></li>
	<li><a href="#tabs-2">Horarios</a></li>
	<li><a href="#tabs-3">Cursos</a></li>
	<li><a href="#tabs-4">Carga Lectiva</a></li>
	<li><a href="#tabs-5">Carga No Lectiva</a></li>
  </ul>
  <div id="tabs-1">
    <input id="test" type="text" value=""><br>
    <table id="lista_docente" class="scroll" cellpadding="0" cellspacing="0"></table> 
    <div id="pager_docente" class="scroll" style="text-align:center;"></div>  
  </div>
  <div id="tabs-2">
  
  </div>
  <div id="tabs-3">
  
  </div>
  <div id="tabs-4">
  
  </div>
  <div id="tabs-5">
  
  </div>
</div>

<script type="text/javascript">

$(function(){
    $('#test').timepickr();
});
var gridimgpath = 'ui-lightness/images';
$("#lista_docente").jqGrid(
{ url: '<?php echo $url_docente ?>',//'server.php?q=2', 
  datatype: "json", 
  colNames: [ 'Dni', 'Nombres', 'E-mail', 'F. Nacimiento', 'Telefono' ], 
  colModel: [ 
             { name: 'dni'              , index: 'dni'              , width: 55  }, 
             { name: 'nombres'          , index: 'nombres'          , width: 200 }, 
             { name: 'correo'           , index: 'correo'           , width: 170 }, 
             { name: 'fecha_nacimiento' , index: 'fecha_nacimiento' , width: 100  , align:    "right" }, 
             { name: 'telefono'         , index: 'telefono'         , width: 80  , align:    "right" } 
              
            ],
  rowNum:      20, 
  rowList:     [10, 20, 30], 
  imgpath:     gridimgpath, 
  pager:       $('#pager_docente'), 
  sortname:    'dni', 
  viewrecords: true, 
  sortorder:   "desc", 
  caption:     "Relaci&oacute;n de Docentes", 
  editurl:     "someurl.php" 
}).navGrid(
            "#pager_docente",
            {
              edit:false,
              add: true,
              del: false
            }
          ); 
$("#a1").click( 
  function()
  { 
    var id = $("#lista_docente").getGridParam('selrow'); 
    if(id) 
    { 
      var ret = 4("#lista_docente").getRowData(id); 
      alert("id="+ret.id+" invdate="+ret.invdate+"..."); 
    } 
    else 
    { 
      alert("Please select row");
    } 
  }); 
  $("#a2").click( 
    function()
    { 
      var su = $("#lista_docente").delRowData(12); 
      if(su) 
        alert("Succes. Write custom code to delete row from server"); 
      else 
        alert("Allready deleted or not in list"); 
    }); 
    
  $("#a3").click( 
    function()
    { 
      var su = $("#lista_docente").setRowData(
                                              11,
                                              {
                                                amount:"333.00",
                                                tax:"33.00",
                                                total:"366.00",
                                                note:"<img src='images/user1.gif'/>"
                                              }); 
      if(su) 
        alert("Succes. Write custom code to update row in server"); 
      else 
        alert("Can not update"); 
    });
     
    $("#a4").click( 
      function()
      { 
        var datarow = {
                        id:"99",
                        invdate:"2007-09-01",
                        name:"test3",
                        note:"note3",
                        amount:"400.00",
                        tax:"30.00",
                        total:"430.00"
                      }; 
        var su = $("#lista_docente").addRowData(99,datarow); 
        if(su) 
          alert("Succes. Write custom code to add data in server"); 
        else 
          alert("Can not update"); 
      }); 
</script>

